<template>
  <div>
    <div class="file-list-wrapper">
      <!-- 操作按钮 -->
      <el-header height="auto"
        ><OperationMenu @getFileModel="getFileModel"></OperationMenu
      ></el-header>
    </div>
    <div class="middle-wrapper">
      <!-- 面包屑导航栏 -->
      <BreadCrumb></BreadCrumb>
    </div>
    <!-- 文件列表-表格模式 -->
    <FileTable
      :fileList="fileList"
      :loading="loading"
      @showFileList="showFileList"
      v-if="fileModel === 0"
    ></FileTable>
    <FileGrid
      :fileList="fileList"
      :loading="loading"
      v-if="fileModel === 1"
    ></FileGrid>
  </div>
</template>

<script setup>
import OperationMenu from "./components/OperationMenu.vue";
import BreadCrumb from "./common/BreadCrumb.vue";
import FileTable from "./common/FileTable.vue";
import FileGrid from "./components/FileGrid.vue";
import FileTimeLine from "./components/FileTimeLine.vue";
import { listFile, listFileTree } from "@/api/disk/file";

const fileList = ref();
const loading = ref(true);
const fileModel = ref(0);

function showFileList(showDirId) {
  const data = {
    dirId: showDirId,
    fileName: undefined,
    fileStatus: undefined,
    fileType: undefined,
    isDir: undefined,
    order: "DESC",
    pageNum: 1,
    pageSize: 999,
    sortBy: "id",
    userId: undefined,
  };
  listFile(data).then((res) => {
    fileList.value = res.content;
    loading.value = false;
  });
}
function getFileModel() {
  fileModel.value = localStorage.getItem("qiwen_file_model")
    ? Number(localStorage.getItem("qiwen_file_model"))
    : 0;
}
showFileList(" ");
</script>

<style lang="stylus" scoped>
.file-list-wrapper {
  >>> .el-header {
    padding: 0;
  }

  .middle-wrapper {
    margin-bottom: 8px;
  }

  .pagination-wrapper {
    position: relative;
    border-top: 1px solid $BorderBase;
    height: 44px;
    line-height: 44px;
    text-align: center;

    .current-page-count {
      position: absolute;
      left: 16px;
      height: 32px;
      line-height: 32px;
      font-size: 13px;
      color: $RegularText;
    }
  }
}
</style>
